<template>
<Card>
  <p slot="title"><Icon type="md-search"></Icon>筛选搜索</p>
  <div slot="extra">
    <Button shape="circle" type="primary" icon="md-search" @click="onSearch">{{$t('search')}}</Button>
    <Button shape="circle" icon="md-sync" @click="onReset">{{$t('reset')}}</Button>
  </div>
  <Form ref="searchForm" :model="form" label-position="right" :label-width="100">
    <Row type="flex">
      <Col>
      <FormItem label="菜单名称" prop="name">
        <Input v-model="form.name" placeholder=""></Input>
      </FormItem>
      </Col>
      <Col>
      <FormItem label="路由名称" prop="access">
        <Input v-model="form.access" placeholder=""></Input>
      </FormItem>
      </Col>
      <Col>
      <FormItem label="图标" prop="icon">
        <Input v-model="form.icon" placeholder=""></Input>
      </FormItem>
      </Col>
    </Row>
  </Form>
</Card>
</template>
<script>
export default {
  props: {
    params: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        name: '',
        access: '',
        icon: ''
      },
      rule: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        access: [
          { required: true, message: '路由名称不能为空', trigger: 'blur' }
        ],
        icon: [
          { required: false, message: '图标不能为空', trigger: 'blur' }
        ],
        displayOrder: [
          { required: false, message: '排序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    // this.form = this.model
  },
  methods: {
    onSearch () {
      this.$emit('on-search', this.form)
    },
    onReset () {
      this.$refs['searchForm'].resetFields()
    }
  }
}
</script>
